<template>
<d2-container type="card">
    <div style="margin: 5px; height: 700px;">
        <SplitPane :min-percent='20' :default-percent='40' split="vertical">
            <template slot="paneL">
                <SplitPane :min-percent='20' :default-percent='60' split="horizontal">
                    <template slot="paneL">
                        <data_plot />
                    </template>
                    <template slot="paneR">
                        <data_table />
                    </template>
                </SplitPane>
            </template>
            <template slot="paneR">
                <box_table />
            </template>

        </SplitPane>
    </div>
</d2-container>
</template>

<script>
import Vue from 'vue'
import SplitPane from 'vue-splitpane'
Vue.component('SplitPane', SplitPane)

import DataTable from './components/table.vue';
import Plot from './components/plot.vue';
import BoxTable from './components/box.vue';

export default {
    data() {
        return {
            "user": "admin"
        }
    },
    components: {
        'data_table': DataTable,
        'data_plot': Plot,
        'box_table': BoxTable
    }
}
</script>
